//**************************************************************************************
// Copyright (c) 2019 西安然阔信息网络科技有限公司 All Rights Reserved
//
// 文件 : map.vue
// 作者 : zhangFan
// 时间 : 2019/7/15
// 描述 : 免单地图页面
//**************************************************************************************
<template>
	<view class="map-container">
		<!-- <default-bar bgColor="bg-colorP" :fixed="'fixed'"></default-bar> -->
		<map id="Map" style="width: 100%; height: 100vh;" :scale="scale" :controls="controls" show-location :latitude="latitude"
		 :longitude="longitude" :markers="covers" @markertap="maskerTap" @controltap="controltap"></map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				covers: [],
				latitude: 0,
				longitude: 0,
				scale: 4,
				controls: [],
				mapCtx: ''
			}
		},
		onShow() {
			var that = this
			let x = 180;
			uni.getSystemInfo({
				success: (res) => {
					if (res.model.indexOf("iPhone X") > -1) {
						x = 230
					}
					that.controls = [{
						id: 1,
						iconPath: '/static/yi-map-for-app-plus/current-position-new.png',
						position: {
							left: 10,
							top: res.screenHeight - x,
							width: 50,
							height: 50
						},
						clickable: true 
					}]
				}
			})
		},
		onLoad() {
			this.initMap()
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			})
			this.mapCtx = wx.createMapContext('Map')
		},
		methods: {
			initMap() {
				var that = this;
				uni.getLocation({
					type: 'gcj02',
					geocode:true,  
					success: map => {
						that.latitude = map.latitude
						that.longitude = map.longitude
						that.$request({
							url: '/shop/getBusinessToMap',
							data: {
								latitude: map.latitude,
								longitude: map.longitude
							},
							success: res => {
								var list = res.data.data
								list.forEach(item => {
									item['iconPath'] = '/static/image/s_b04-new.png'
									item['width'] = 20
									item['height'] = 25
									item['callout'] = {
										content: item.name,
										borderRadius: 8,
										padding: 5
									}
								})
								that.covers = list
								that.scale = 12
								uni.hideLoading()
							},
							fail: () => {

							},
							complete: () => {}
						})
					},
					fail: () => {
						var storageLL = uni.getStorageSync('coordinate')
						that.latitude = storageLL.latitude
						that.longitude = storageLL.longitude
						that.$request({
							url: '/shop/getBusinessToMap',
							data: {
								latitude: storageLL.latitude,
								longitude: storageLL.longitude
							},
							success: res => {
								var list = res.data.data
								list.forEach(item => {
									item['iconPath'] = '/static/image/s_b04-new.png'
									item['width'] = 20
									item['height'] = 25
									item['callout'] = {
										content: item.name,
										borderRadius: 8,
										padding: 5
									}
								})
								that.covers = list
								uni.hideLoading()
							},
							fail: () => {},
							complete: () => {}
						})
					},
					complete: () => {}
				});
			},
			maskerTap(e) {
				// 点击商户id
				var markerId = e.markerId
				// debugger
				this.$request({
					url: '/shop/getBusinessDetail',
					data: {
						business_id: markerId
					},
					success: res => {
						if (res.data.status == 1) {
							uni.openLocation({
								latitude: parseFloat(res.data.data.latitude),
								longitude: parseFloat(res.data.data.longitude),
								name: res.data.data.name,
								address: res.data.data.address,
								scale: 18
							})
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			controltap(e) {
				this.mapCtx.moveToLocation();
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
	}
</style>
<style>
	.map-container {
		width: 100%;
	}

	.content {
		text-align: center;
		height: 400upx;
	}

	.logo {
		height: 200upx;
		width: 200upx;
		margin-top: 200upx;
	}

	.title {
		font-size: 36upx;
		color: #8f8f94;
	}
</style>
